<style type="text/css">
    .hr-examineSimpleAddQuestions-screen {
        width: 32px;
        text-align:center;
        border: #cccccc;
    }
    .hr-examineSimpleAddQuestions-label {
        font-size: 18px;
    }
    .hr-examineSimpleAddQuestions-margin {
        margin-bottom: 10px;
    }
</style>

<div class="layui-row layui-col-space8 febs-container">
    <div class="layui-col-md7 layui-col-sm6 layui-col-xs12" style="border-left: 20px solid #FCFCFC; position: relative">
        <div>
            <span style="font-size: 20px;font-weight: bolder">单选题(每题
                <input class="hr-examineSimpleAddQuestions-screen" style="border-bottom: 1px solid black"/>
                分, 共<span>0</span>题, 共<span>0</span>分)
            </span><br/>
            <div style="margin-top: 20px;border: 1px solid #ccc" id="hr-examineSimple-radio-content">
            </div>
            <div class="hr-examineSimpleAddQuestions-margin">
                <div>
                    <input  type="button" style="background: white;border: 1px solid #CCCCCC; font-size: 32px;font-weight: bolder;color: #CCCCCC; width: 100%;"
                           value="+"  id="hr-examineSimple-radio-add-btn"/>
                </div>
            </div>
        </div>
        <div>
            <span style="font-size: 20px;font-weight: bolder">多选题(每题
                <input class="hr-examineSimpleAddQuestions-screen" style="border-bottom: 1px solid black"/>
                分, 共<span>0</span>题, 共<span>0</span>分)
            </span><br/>
                <div style="margin-top: 20px;border: 1px solid #ccc" id="hr-examineSimple-checkbox-content">
            </div>

            <div class="hr-examineSimpleAddQuestions-margin">
                <div>
                    <input  type="button" style="background: white;border: 1px solid #CCCCCC; font-size: 32px;font-weight: bolder;color: #CCCCCC; width: 100%;"
                            value="+"  id="hr-examineSimple-checkbox-add-btn"/>
                </div>
            </div>
        </div>
        <div>
            <span style="font-size: 20px;font-weight: bolder">判断题(每题
                <input class="hr-examineSimpleAddQuestions-screen" style="border-bottom: 1px solid black"/>
                分, 共<span>0</span>题, 共<span>0</span>分)
            </span><br/>
            <div style="margin-top: 20px;border: 1px solid #ccc" id="hr-examineSimple-judge-content">
            </div>
            <div class="hr-examineSimpleAddQuestions-margin">
                <div>
                    <input  type="button" style="background: white;border: 1px solid #CCCCCC; font-size: 32px;font-weight: bolder;color: #CCCCCC; width: 100%;"
                            value="+"  id="hr-examineSimple-judge-add-btn"/>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-col-md5 layui-col-sm6 layui-col-xs12" >
        <div id="view-phone-advert">
            <div class="phone">
                <div class="phone_bg1">
                    <div class="phone_bg2">
                        <div class="phone_bg3">
                            <div class="phone_lh">
                                <div class="phone_lh_con">
                                    <div class="lh_tiao"></div>
                                    <div class="lh_yuan"></div>
                                </div>
                            </div>
                            <span class="date_time">00:00</span>
                            <div class="states">
                                <ul class="ul_xinhao">
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>

                                <div class="wifi1">
                                    <div class="wifi2">
                                        <div class="wifi3">
                                            <div class="wifi4">
                                                <div class="wifi5">

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="dianliang"></div>
                            </div>
                            <div id="advert_preview" class="advert_content_phone" >
                            </div>
                            <div class="phone_home"></div>
                        </div>
                    </div>
                </div>
                <div class="jingyin"></div>
                <div class="yl_jia"></div>
                <div class="yl_jian"></div>
                <div class="suoping"></div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="hr-examineSimpleAddQuestions-add-radio">
    <form class="layui-form" action=""  lay-filter="hr-examineSimple-add-form" style="margin: 10px;padding: 10px; border: 1px solid #ccc" >
        <div class="hr-examineSimpleAddQuestions-margin">
            <label class="layui-form-label hr-examineSimpleAddQuestions-label">题目</label>
            <div class="layui-input-block">
                <input  type="text" placeholder="请输入题目" name="option_content_1" minlength="2"
                        lay-verify="range|name|txt" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="hr-examineSimpleAddQuestions-margin">
            <label class="layui-form-label hr-examineSimpleAddQuestions-label">选项</label>
            <div class="layui-input-block">
                <input  type="text" name="option_content_2" minlength="2"
                        lay-verify="range|name|txt" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="hr-examineSimpleAddQuestions-margin">
            <label class="layui-form-label hr-examineSimpleAddQuestions-label">选项</label>
            <div class="layui-input-block">
                <input  type="text" name="option_content_3" minlength="2"
                        lay-verify="range|name|txt" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="hr-examineSimpleAddQuestions-margin">
            <label class="layui-form-label hr-examineSimpleAddQuestions-label">选项</label>
            <div class="layui-input-block">
                <input  type="text" name="option_content_4" minlength="2"
                        lay-verify="range|name|txt" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="hr-examineSimpleAddQuestions-margin">
            <label class="layui-form-label hr-examineSimpleAddQuestions-label">选项</label>
            <div class="layui-input-block">
                <input  type="text" name="option_content_5" minlength="2"
                        lay-verify="range|name|txt" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="hr-examineSimpleAddQuestions-margin">
            <div class="layui-input-block">
                <input type="button" style="background: white;border: 1px solid #CCCCCC; font-size: 32px;font-weight: bolder;color: #CCCCCC; width: 100%;"
                       value="+" onclick="addQuestion(this)"/>
            </div>
        </div>
        <div class="hr-examineSimpleAddQuestions-margin">
            <div style="margin-left: 10px; color: black">
                <input  type="text" placeholder="请输入答案" name="option_content_5" minlength="2"
                        lay-verify="range|name|txt" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div  style="margin:10px auto " align="center">
            <div style="margin-left: 10px">
                <button type="button" class="layui-btn layui-btn-sm">确认</button>
                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">取消</button>
            </div>
        </div>
    </form>
</script>

<script type="text/html" id="hr-examineSimpleAddQuestions-add-checkbox">
    <form class="layui-form" action=""  lay-filter="hr-examineSimple-add-form" style="margin: 10px;padding: 10px; border: 1px solid #ccc" >
        <div class="hr-examineSimpleAddQuestions-margin">
            <label class="layui-form-label hr-examineSimpleAddQuestions-label">题目</label>
            <div class="layui-input-block">
                <input  type="text" placeholder="请输入题目" name="option_content_1" minlength="2"
                        lay-verify="range|name|txt" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="hr-examineSimpleAddQuestions-margin">
            <label class="layui-form-label hr-examineSimpleAddQuestions-label">选项</label>
            <div class="layui-input-block">
                <input  type="text" name="option_content_2" minlength="2"
                        lay-verify="range|name|txt" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="hr-examineSimpleAddQuestions-margin">
            <label class="layui-form-label hr-examineSimpleAddQuestions-label">选项</label>
            <div class="layui-input-block">
                <input  type="text" name="option_content_3" minlength="2"
                        lay-verify="range|name|txt" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="hr-examineSimpleAddQuestions-margin">
            <label class="layui-form-label hr-examineSimpleAddQuestions-label">选项</label>
            <div class="layui-input-block">
                <input  type="text" name="option_content_4" minlength="2"
                        lay-verify="range|name|txt" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="hr-examineSimpleAddQuestions-margin">
            <label class="layui-form-label hr-examineSimpleAddQuestions-label">选项</label>
            <div class="layui-input-block">
                <input  type="text" name="option_content_5" minlength="2"
                        lay-verify="range|name|txt" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="hr-examineSimpleAddQuestions-margin">
            <div class="layui-input-block">
                <input type="button" style="background: white;border: 1px solid #CCCCCC; font-size: 32px;font-weight: bolder;color: #CCCCCC; width: 100%;"
                       value="+" onclick="addQuestion(this)"/>
            </div>
        </div>
        <div class="hr-examineSimpleAddQuestions-margin">
            <div style="margin-left: 10px; color: black">
                <input  type="text" placeholder="请输入答案" name="option_content_5" minlength="2"
                        lay-verify="range|name|txt" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div  style="margin:10px auto " align="center">
            <div style="margin-left: 10px">
                <button type="button" class="layui-btn layui-btn-sm">确认</button>
                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">取消</button>
            </div>
        </div>
    </form>
</script>

<script type="text/html" id="hr-examineSimpleAddQuestions-add-judge">
    <form class="layui-form" action=""  lay-filter="hr-examineSimple-add-form" style="margin: 10px;padding: 10px; border: 1px solid #ccc">
        <div class="hr-examineSimpleAddQuestions-margin">
            <label class="layui-form-label hr-examineSimpleAddQuestions-label">题目</label>
            <div class="layui-input-block">
                <input  type="text" placeholder="请输入题目" name="option_content_1" minlength="2"
                        lay-verify="range|name|txt" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-labe" style="font-size: 16px; margin-left: 0px" >请选择答案:</label>
            <div class="layui-input-block">
                <input type="radio" name="judge" value="正确" title="正确" checked="">
                <input type="radio" name="judge" value="错误" title="错误">
            </div>
        </div>
        <div  style="margin:10px auto " align="center">
            <div style="margin-left: 10px">
                <button type="button" class="layui-btn layui-btn-sm" onclick="confirm(this)">确认</button>
                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="cancel(this)">取消</button>
            </div>
        </div>
    </form>
</script>
<script type="text/html" id="hr-examineSimpleAddQuestions-add-option">
    <div class="hr-examineSimpleAddQuestions-margin">
        <label class="layui-form-label hr-examineSimpleAddQuestions-label">选项</label>
        <div class="layui-input-block">
            <input  type="text" name="option_content_3" minlength="2"
                    lay-verify="range|name|txt" autocomplete="off" class="layui-input">
        </div>
    </div>
</script>
<script type="text/html" id="hr-examineSimpleAddQuestions-delete-edit">
    <div  style="margin:10px auto " align="center">
        <div style="margin-left: 10px">
            <button type="button" class="layui-btn layui-btn-sm" onclick="deleteQuestion(this)">删除</button>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">编辑</button>
        </div>
    </div>
</script>
<script type="text/javascript">

    layui.use(['febs', 'form', 'xmSelect', 'validate', 'laydate', 'upload','element'], function () {
        let $ = layui.$,
            febs = layui.febs,
            layer = layui.layer,
            form = layui.form,
            laydate = layui.laydate,
            validate = layui.validate;
        let lock = false;
        let imgView = '';
        let a = 0;
        form.verify(validate);
        form.render();
        advertviewbtn();
        $("#hr-examineSimple-judge-add-btn").click(function () {
            $("#hr-examineSimple-judge-content").append($("#hr-examineSimpleAddQuestions-add-judge").html());
            form.render();
        });

        $("#hr-examineSimple-radio-add-btn").click(function () {
            $("#hr-examineSimple-radio-content").append($("#hr-examineSimpleAddQuestions-add-radio").html());
            form.render();
        });

        $("#hr-examineSimple-checkbox-add-btn").click(function () {
            $("#hr-examineSimple-checkbox-content").append($("#hr-examineSimpleAddQuestions-add-checkbox").html());
            form.render();
        });
        window.addQuestion = function(e) {
            a = $(e).parent().parent().siblings().size();
            if(a < 13){
                a = a + 1;
                $(e).parent().parent().before($("#hr-examineSimpleAddQuestions-add-option").html());
            }else {
                return alert("选项最多只能添加10个！");
            }

        };
        window.cancel = function(e) {
            febs.modal.confirm('取消', '确定取消？取消后当前操作不会保存！', function () {
                $(e).parent().parent().parent().remove();
            });
        };
        window.confirm = function(e) {
            $(e).parent().parent().before();
            $(e).parent().parent().remove();

        };

        laydate.render({
            elem: '#currentTime',
            type: 'datetime',
            value: new Date(),
            done: function (value, date) {
            }
            ,btns: ['clear', 'confirm']
        });

        laydate.render({
            elem: '#cur_date',
            type: 'date',
            value: new Date(),
            done: function (value, date) {
            }
            ,btns: ['clear', 'confirm']
        });

        laydate.render({
            elem: '#cur_time',
            type: 'time',
            format: 'HH:mm',
            value: new Date(),
            done: function (value, date) {
            }
            ,btns: ['clear', 'confirm']
        });

        form.on('submit(hr-examineSimple-add-form-submit)', function (data) {

            return false;
        });

        function advertviewbtn() {
            $("#advert_phone_btn").click(function () {
                previewrender();
            });
        };

        //当前时间： HH:mm
        function currentTime() {
            laydate.render({
                elem: '#cur_time',
                type: 'time',
                format: 'HH:mm',
                value: new Date(),
                done: function (value, date) {
                }
                ,btns: ['clear', 'confirm']
            });
            const time = $("#cur_time").val();
            $(".date_time").html(time);
        };

        //广告预览渲染
        function previewrender() {
            const content = ue.getContent();
            let title = $("#add_title").val();
            if (title == "") {
                febs.alert.warn('广告标题不能为空！');
                return false;
            }
            if (imgView == "") {
                febs.alert.warn('广告图片不能为空！');
                return false;
            }
            if (content == "") {
                febs.alert.warn('广告内容不能为空！');
                return false;
            }
            let createUser = $("#add_createUser").val();
            const curdate = $("#cur_date").val();

            currentTime();
            let str = "";
            str = "<div align='center' style='margin-bottom: 10px;'><span>广告详情</span></div>\n" +
                "        <div><span style='font-weight: bold;font-size: 20px;'>" + title + "</span></div>\n" +
                "        <div style='margin-top: 15px;margin-bottom: 5px;'><span style='margin-right: 40px;'>全务教育</span><span style='margin-left: 60px;'>" + createUser + "</span><span style='margin-left: 70px;'>" + curdate + "</span></div>\n" +
                "        <div align='center'><img src=" + imgView + " width='360px;'height='235px;' /></div>\n" +
                "        <div style='margin-top: 5px;'>" + content + "</div>"
            $("#advert_preview").html(str);
        }

    });
</script>


